<template>
	<view>
		<scroll-view scroll-x="true">
			<view class="padding-xs" style="width:2000rpx;">
				<view class="flex" v-for="(itemY,y) in widthsArr" :key="y">
					<view class="box radius flex justify-center align-center" :class="''+bgColor(x,y)" :style="{width:((itemX*50)+((itemX-1)*4))+'px'}" v-for="(itemX,x) in itemY" :key="x" v-html="girdValue(x,y)" @tap="clickEdit(x,y)"></view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-modal" :class="formModal&&!isCustomer?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改货道</view>
					<view class="action" @tap="formModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<view class="cu-form-group">
						<view class="title">控制信道:</view>
						<NumberBox v-model="form.channelNumber" :min="1" :max="100"></NumberBox>
					</view>
					<view class="cu-form-group">
						<view class="title">最大库存:</view>
						<NumberBox v-model="form.maxStore" :min="1" :max="20"></NumberBox>
					</view>
					<button class="cu-btn lg bg-blue" @tap="clickSubmitForm">确认修改</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="formModal&&isCustomer?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改货道</view>
					<view class="action" @tap="formModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<view class="cu-form-group">
						<view class="title">控制信道:</view>
						<NumberBox v-model="form.channelNumber" :min="1" :max="100"></NumberBox>
					</view>
					<view class="cu-form-group">
						<view class="title">存放商品:</view>
						<image :src="goodsImg(form.goodsId)" style="width:60rpx;height:60rpx;" />
						<button v-if="!!form.goodsId" class="cu-btn bg-red" @tap="form.goodsId=''">移除</button>
						<button class="cu-btn" @tap="clickSelectGoods">选择商品</button>
					</view>
					<view v-if="selectGoodsView">
						<GoodsList :isSelect="true" @selected="selectedGoods"></GoodsList>
					</view>
					<view class="cu-form-group">
						<view class="title">最大库存:</view>
						<NumberBox v-model="form.maxStore" :min="1" :max="100"></NumberBox>
					</view>
					<view class="cu-form-group">
						<view class="title">当前库存:</view>
						<NumberBox v-model="form.store" :min="0" :max="form.maxStore"></NumberBox>
					</view>
					<button class="cu-btn lg bg-blue" @tap="clickSubmitForm">确认修改</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import NumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import GoodsList from './goods-list.vue';
	export default {
		components:{
			NumberBox,
			GoodsList
		},
		props:{
			value:{
				type:Array,
				default:[]
			},
			isCustomer:{
				type:Boolean,
				default:false
			},
			widthsArr:{
				type:Array,
				default:[[1,1,1]]
			},
			goodsArr:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				inputValue:[],
				formModal:false,
				selectGoodsView:false, //是否出现选择商品界面
				form:{
					x:1,
					y:1,
					width:1,
					channelNumber:1,
					maxStore:5,
					store:0,
					goodsId:'',
					status:0
				},
			};
		},
		computed: {
			girdValue() {
				return function (x, y) {
					let value = this.inputValue.find(item => {
						return item.x == x && item.y == y
					});
					if(this.isCustomer){
						let goods=this.goodsArr.find(item => {
							return item._id==value.goodsId;
						});
						return `<img src="${!!goods?goods.img:''}" style="width:40px;height:40px;" />`;
					}else{
						return `<div>信:${value.channelNumber}</div><div>大:${value.maxStore}</div>`;
					}
				}
			},
			bgColor(){
				return function (x, y) {
					let value = this.inputValue.find(item => {
						return item.x == x && item.y == y
					});
					let percent=value.store/value.maxStore;
					if(percent===0){
						return 'bg-grey'
					}
					if(percent<=0.2){
						return 'bg-red'
					}
					if(percent>0.2&&percent<=0.8){
						return 'bg-yellow'
					}
					return 'bg-green';
				}
			},
			goodsImg() {
				return function (goodsId) {
					let goods=this.goodsArr.find(item => {
						return item._id==goodsId;
					});
					return !!goods?goods.img:'';
				}
			}
		},
		watch: {
			value(val) {
				this.inputValue = val;
			},
			inputValue(newVal, oldVal) {
				this.$emit("input", newVal);
			}
		},
		onLoad() {
			//console.log(this.widthsArr,this.value);
			this.inputValue = this.value;
		},
		methods:{
			selectedGoods(_id){
				this.selectGoodsView=false;
				this.form.goodsId=_id;
			},
			clickSelectGoods(){
				this.selectGoodsView=true;
			},
			clickEdit(x,y){
				let value = this.inputValue.find(item => {
					return item.x == x && item.y == y
				});
				Object.assign(this.form,value);
				this.formModal=true;
			},
			clickSubmitForm(){
				let valueIndex = this.inputValue.findIndex(item => {
					return item.x == this.form.x && item.y == this.form.y
				});
				if(this.isCustomer){
					Vue.set(this.inputValue,valueIndex,Object.assign({},this.form));
					Vue.set(this.$store.state.machine.goodsWayArr,valueIndex,Object.assign({},this.form));
					//向服务器提交信息
					this.$u.api.customer_machineEditOneGoodsWay(Object.assign({},this.form,{machine_id:this.$store.state.machine._id})).then(data => {
						
					});
				}else{
					let {x,y,width,channelNumber,maxStore}=this.form;
					Vue.set(this.inputValue,valueIndex,Object.assign({},{x,y,width,channelNumber,maxStore}));
					
				}
				this.formModal=false;
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	height:50px;
	margin-right:4px;
	margin-top:4px;
	text-align:center;
}
</style>
